<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    int sectionId=Integer.parseInt(request.getParameter("sectionId"));
    int cid=Integer.parseInt(request.getParameter("cid"));
    String nickname=request.getSession().getAttribute("nickname").toString();
%>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传视频页面</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/upload-videos.css">
    <style>
        #progress{
            height:1rem;
            width:25rem;
            border: 0.1rem solid #cccccc;
            position: relative;
            border-radius: 0.5rem;
            margin-top: 1rem;
        }
        #progress .progress-item{
            height:100%;
            position: absolute;
            left:0;
            top: 0;
            background: #cccccc;
            border-radius: 0.5rem;
            transition: width .3s linear;
        }
    </style>
    <script>
        // zmj

        function isValid() {
            var sectionId=<%=sectionId%>;
            var radios = document.getElementsByName("new-ch");
            var flag=false;
            for(var i=0;i<radios.length;i++){
                if(radios[i].checked){
                    flag=true;
                    if(sectionId==-1){
                        if(radios[i].getAttribute("value")=== "false"){
                            alert("第一节课请创建章节");
                            return false;
                        }
                    }
                }
            }
            if(flag==false){
                alert("请选择是否添加章节！");
                return false;
            }
            return true;
        }

        function send() {
            // var submit=document.getElementById("submit");
            var file=document.getElementById("upload2");
            var lesson_name=document.getElementsByName("lesson_name")[0];
            var radios=document.getElementsByName("new-ch");
            var addSection="";
            for(var i=0;i<radios.length;++i){
                if(radios[i].checked===true){
                    addSection=radios[i].value;
                }
            }
            var sectionName=document.getElementsByName("sectionName")[0];
            if(isValid()){
                var formData=new FormData();
                formData.append("video",file.files[0]);
                formData.append("lesson_name",lesson_name.value);
                formData.append("sectionName",sectionName.value);
                formData.append("new-ch",addSection);
                var ajax=new XMLHttpRequest();
                ajax.onreadystatechange=function (ev1) {
                    if(ajax.status==200&&ajax.readyState==4){
                        var result=ajax.responseText;
                        if(result.indexOf("true")!==-1){
                            alert("上传成功！");
                        }else {
                            alert("上传失败！");
                        }
                    }
                };
                ajax.open("post","Upload?sectionId=<%=sectionId%>&cid=<%=cid%>");
                ajax.send(formData);
            }
        }
    </script>
</head>
<body>
<!--头部-->
<div class="top">
    <div class="w">
        <div class="top-left">
            <img src="images/Q-logo.png">
        </div>
        <div class="top-center">
            <input placeholder="搜索你感兴趣的课程">
            <button class="iconfont">&#xe63c;</button>
        </div>
        <div class="top-right">
            <ul>
                <a href="index.jsp"><li>首页</li></a>
                <li onclick="alert('请退出登录！')">登录注册</li>
                <a href="self.jsp"><li class="current">个人主页</li></a>
            </ul>
        </div>
    </div>
</div>

<div class="top-self" style="background-image: url(images/bg1.jpg); background-size: cover;">
    <div class="w">
        <img class="pro" src="images/pro1.jpg" alt="123"/>
        <div class="text">
            <h2><%=nickname%>同学，欢迎登录</h2>
            <h4>构成我们学习最大障碍的是已知的东西，而不是未知的东西。——贝尔纳</h4>
        </div>
        <a href="QuitLogin"><button class="log_out">退 出 登 录</button></a>
    </div>
</div>
<!--中部-->
<div class="main">
    <div class="main-top-bar">
        <div class="w">
            <a href="index.jsp">首页&nbsp>&nbsp</a>
            <a href="self.jsp">个人中心&nbsp>&nbsp</a>
            <a href="manage-videos.jsp?cid=<%=cid%>" class="current">视频管理</a>
        </div>
    </div>
    <div class="main-content">
        <div class="w2">
<%--            <form action="Upload?sectionId=<%=sectionId%>&cid=<%=cid%>" method="post" enctype="multipart/form-data">--%>
                <div class="upload" id="upload">
                    <span class="iconfont">&#xe642;</span>
                    <span class="text">拖拽视频到此处也可上传</span>
                </div>
                <div class="upload-btn">
                    <button>上传视频</button>
                    <input type="file" title="" id="upload2" name="video">
                    <div id="progress">
                        <div class="progress-item"></div>
                    </div>
                </div>
                <div class="info">
                    <div class="i1">
                        <div class="d1">
                            <h2 class="h">文件上传</h2>
                            <span class="s">(推荐采用mp4、flv等格式)</span>
                        </div>
                        <ul id="ul" class="clearfix">
                            <!--<li class="clearfix">-->
                            <!--<span class="iconfont">&#xe69b;</span>-->
                            <!--<input class="p1" placeholder="123"></input>-->
                            <!--<p class="p2">456</p>-->
                            <!--</li>-->
                        </ul>
                    </div>
                    <div class="i2">
                        <div class="clearfix">
                            <h2>是否新建章节</h2>
                            <label>
                                <input name="new-ch" type="radio" value="true" />
                                <span>是</span>
                            </label>
                            <label>
                                <input name="new-ch" type="radio" value="false" />
                                <span>否</span>
                            </label>
                        </div>
                        <input placeholder="请在此处填写章节名" class="text" name="sectionName">

                        <div class="q clearfix">
                            <h2>机构</h2>
                            <input type="text" class="text" />
                        </div>
                    </div>
                </div>
                <div class="submit">
                    <button id="submit" onclick="send()">提交</button>
                </div>
<%--            </form>--%>
        </div>
    </div>
</div>

<!--尾部-->
<div class="bottom">
    <div class="bottom-board">
        <span>丰富的视频资源帮助学生更好地学习</span>
        <span>基于认知负荷的多少推荐课程</span>
        <span>方案多多，适合每一位学生</span>
    </div>

</div>

<script src="js/myFunc.js"></script>
<script>
    var upload=$('upload');

    upload.addEventListener('dragover', function(e){

        e.preventDefault();

    }, false);

    upload.addEventListener('drop', function(e){

        e.preventDefault();     //浏览器默认会打开该文件，因此停掉该默认事件

        console.log(e.dataTransfer.files);      //选中的文件

    }, false);

    upload.addEventListener('drop', function(e){
        e.preventDefault();     //浏览器默认会打开该文件，因此停掉该默认事件
        var files = e.dataTransfer.files;
        uploadVideo(files);
    }, false);

    document.querySelector("#upload2").addEventListener("change",function (e) {
        //获取到选中的文件
        var files = document.querySelector("#upload2").files;
        uploadVideo(files);
    }, false);

    // document.querySelector("#upload3").addEventListener("change",function (e) {
    //     //获取到选中的文件
    //     var files = document.querySelector("#upload3").files;
    //     uploadPic(files);
    // }, false);


    function uploadVideo(files) {
        console.log(files);
        var file = files[0];
        var path = file.name;
        var suffix = path.substr(path.lastIndexOf('.'));
        var lower_suffix = suffix.toLowerCase();

        if(!(lower_suffix === '.mp4' || lower_suffix === '.flv' || lower_suffix === '.avi' || lower_suffix === '.mov')){
            alert('文件'+ file.name + '格式错误');
            // continue;
        }else{
            var formData = new FormData();
            formData.append('file', file);
            var ul = $('ul');
            console.log(file);
            ul.innerHTML+='<li class="clearfix">\n' +
                '<span class="iconfont">&#xe69b;</span>\n' +
                '<input name="lesson_name" class="p1" value="'+ file.name +'">（点击修改视频标题）</input>\n' +
                '<p class="p2">上传成功</p>\n' +
                '</li>';
            var xhr = new XMLHttpRequest();
            xhr.upload.onprogress = function(e){
                document.querySelector("#progress .progress-item").style.width = 0;
                if(event.lengthComputable){
                    var percent = event.loaded/event.total * 100;
                    document.querySelector("#progress .progress-item").style.width = percent+"%";
                }
            }
            xhr.open('post', '/upload', true);
            xhr.send(formData);
        }
    }

    function uploadPic(files) {
        console.log(files);
        var formData = new FormData();
        var file = files[0];
        var path = file.name;
        var suffix = path.substr(path.lastIndexOf('.'));
        var lower_suffix = suffix.toLowerCase();

        if(!(lower_suffix === '.jpg' || lower_suffix === '.png' || lower_suffix === '.jpeg')){
            alert('文件'+ file.name + '格式错误');
            // continue;
        }else{
            var reads = new FileReader();
            reads.readAsDataURL(file);
            reads.onload = function(e) {
                $("img").src = this.result;
            };
        }
    }


    //zmj





</script>
</body>
</html>